﻿@page "/pivot-table/default-filtering"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
    <p>This sample demonstrates filtering row and column headers either by including or excluding them from the pivot table. </p>
</SampleDescription>
<ActionDescription>
   <p> Member filtering can be applied either through code-behind or UI. To achieve this in code-behind, use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html'>PivotViewFilterSetting</a></code> class in the pivot table along with the following properties.</p>
        <table>
        <tr>
            <td style='vertical-align: top;padding: 10px 0;width:100px'><code>Name :</code></td>
            <td>Specifies the exact field choosen for filtering.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'> <code>Type :</code></td>
            <td>Specifies the filter type and it should be either 'Include' or 'Exclude' in this scenario.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'> <code>Items :</code> </td>
            <td>Specifies the fields to be included or excluded.</td>
        </tr>
    </table><br/>
    <p>In this sample, we have applied member filter for the field <b>Country</b> by excluding <b>Canada</b> and <b>France</b> in code behind.</p>
    <p>To achieve the same through UI, either enable grouping bar or field list or both to perform the filtering operation.</p>
    <p>More information on the member filtering feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/filtering/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="400" Width="100%" ShowGroupingBar=true EnableValueSorting=true ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true>
                <PivotViewColumns>
                    <PivotViewColumn Name="Country"></PivotViewColumn>
                    <PivotViewColumn Name="Products"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Year"></PivotViewRow>
                    <PivotViewRow Name="Quarter"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFilters>
                    <PivotViewFilter Name="Product_Categories" Caption="Product Categories"></PivotViewFilter>
                </PivotViewFilters>
                <PivotViewFilterSettings>
                    <PivotViewFilterSetting Name="Country" Type="Syncfusion.Blazor.PivotView.FilterType.Exclude" Items="@FilterMember"></PivotViewFilterSetting>
                </PivotViewFilterSettings>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
        </SfPivotView>
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }
</style>

@code{
    public string[] FilterMember = new string[] { "Canada", "France" };
    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }

}